#page-12 {
  display: none;
  position: absolute;
  @include square(100%);
  background-image: url("../image/page-12-bg.jpg");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center center;
  -webkit-transform-origin: center center;
  z-index: 10;
  top: 0;
  left: 0;
  overflow: hidden;

  .word {
    background-image: url("../image/page-12-word.png");
  }
}

#page-13 {
  display: none;
  position: absolute;
  @include square(100%);
  background-image: url("../image/page-13-bg.jpg");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center center;
  -webkit-transform-origin: center center;
  z-index: 10;
  top: 0;
  left: 0;
  overflow: hidden;

  .word {
    background-image: url("../image/page-13-word.png");
  }
}

#page-14 {
  display: none;
  position: absolute;
  @include square(100%);
  background-image: url("../image/page-14-bg.jpg");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center center;
  -webkit-transform-origin: center center;
  z-index: 10;
  top: 0;
  left: 0;
  overflow: hidden;

  .word {
    background-image: url("../image/page-14-word.png");
  }
}

#page-15 {
  display: none;
  position: absolute;
  @include square(100%);
  background-image: url("../image/page-15-bg.jpg");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center center;
  -webkit-transform-origin: center center;
  z-index: 10;
  top: 0;
  left: 0;
  overflow: hidden;

  .word {
    background-image: url("../image/page-15-word.png");
  }
}

#page-16 {
  display: none;
  position: absolute;
  @include square(100%);
  background-image: url("../image/page-16-bg.jpg");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center center;
  -webkit-transform-origin: center center;
  z-index: 10;
  top: 0;
  left: 0;
  overflow: hidden;

  .word {
    background-image: url("../image/page-16-word.png");
  }
}

#page-17 {
  display: none;
  position: absolute;
  @include square(100%);
  background-image: url("../image/page-17-bg.jpg");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center center;
  -webkit-transform-origin: center center;
  z-index: 10;
  top: 0;
  left: 0;
  overflow: hidden;

  .word {
    background-image: url("../image/page-17-word.png");
  }
}

#page-18 {
  display: none;
  position: absolute;
  @include square(100%);
  background-image: url("../image/page-18-bg.jpg");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center center;
  -webkit-transform-origin: center center;
  z-index: 10;
  top: 0;
  left: 0;
  overflow: hidden;

  .word {
    background-image: url("../image/page-18-word.png");
  }
}

#page-12, #page-13, #page-14, #page-15, #page-16, #page-17, #page-18 {
  .pinner {
    position: relative;
    top: 25%;
  }
  .word {
    background-size: 100% 100%;
    @include size(px2rem-b(560px), px2rem-b(392px));
    position: absolute;
    left: px2rem-b(23px);
  }
  .back {
    @include size(px2rem-b(192px), px2rem-b(75px));
    background-image: url("../image/page-12-back.png");
    background-size: 100% 100%;
    position: absolute;
    left: px2rem-b(383px);
    top: px2rem-b(412px);
  }
}